<template>
  <div>
    <div class="login-part">
      <h1>
        <el-row class="loginheader-logo"></el-row>
        <el-row class="loginheader">{{ firHeaderTle }}<br>{{secHeaderTle}}</el-row>
      </h1>
      <el-form :model="ruleForm2" :label-position="labelPosition" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="login-Form">
        <el-form-item label="用户名: " prop="usrname" class="labelName">
          <el-input v-model="ruleForm2.usrname"></el-input>
        </el-form-item>
        <el-form-item label="密码: " prop="pass" class="labelName">
          <el-input type="password" v-model="ruleForm2.pass" auto-complete="off">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm2')" class="submitBtn">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
<!--    <el-hu-->
    <el-button  @click.native="onBtnToGithubClicked">去github</el-button>
    <!-- 自定义组件 vue  -->

    <!-- </div> -->

    <el-row>
      <hover></hover>
      <hover-show></hover-show>
      <hover2></hover2>
    </el-row>

    <search-father></search-father>

    <!-- <template>
   <div> -->
    <!-- <hover></hover>
    <hover-show></hover-show> -->
    <!-- </div>
  </template> -->
  </div>
</template>

<style src="./login.css" type="text/css">
</style>

<script>
// 引入axios HTTP module to submit login form
import { isNull, axiosRequest, storageOperation } from "@/common/common";
import { commonConfig } from "@/config/commonConfig";

import HoverShow from "@/components/HoverShow/HoverShow";
import Hover from "@/components/HoverShow/Hover";
import Hover2 from "@/components/HoverShow/Hover2";

import SearchFather from "@/components/Search/SearchFather";
import method from "../../util/method";
import strUtil from "../../util/strUtil";

// console.log("HoverShow");
// console.log(HoverShow);

// 这样不能引入 组件
//  import {
//   HoverShow
// } from '@/HoverShow/HoverShow';

// 需要引入， 不引入好像也没事？
// 并不是 是需要引入的  之前是没刷新
// import data from '@/util/mock.js';
// 可以  但是这个data 是什么
// 是一整个mock 对象  其实叫做 Mock 更好吧
// 因为那边 export 了
// import Mock from '@/util/mock.js';
// console.log("data");
// console.log(data);

// require('@/util/mock.js');
// require 可以
// 这是正常的

// import data from 'src/util/mock.js';
// 从src 就错了
export default {
  name: "Login",
  data() {
      // strUtil
    // xhr.js?74b8:160 POST http://10.50.75.111:9888/api/User/Login net::ERR_CONNECTION_TIMED_OUT
    // 局域网
    var validateUsrName = (rule, value, callback) => {
        // method
      if (!value) {
        return callback(new Error("用户名不能为空"));
      } else callback();
    };
    var checkPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else callback();
    };
    // mock js
    return {
      postUrl: commonConfig.rootUrl + commonConfig.UserLogin,
      firHeaderTle: "重点营运车辆动态信息",
      secHeaderTle: "公共监管与服务平台",
      labelPosition: "right",
      ruleForm2: {
        usrname: "",
        pass: ""
      },
      rules2: {
        usrname: [
          {
            validator: validateUsrName,
            trigger: "blur"
          }
        ],
        pass: [
          {
            validator: checkPass,
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
      // https://blog.csdn.net/weixin_39378691/article/details/88795900
      onBtnToGithubClicked(){
          this.$router.push({
              // name:'/Commic',
              name:'Github',
          })
      },
    submitForm(formName) {
      var self = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          const LoginID = commonConfig.LoginID,
            Password = commonConfig.Password;
          const postObj = {
            params: {
              LoginID: this.ruleForm2.usrname,
              Password: this.ruleForm2.pass
            },
            postUrl: this.postUrl
          };
          console.log("postObj");
          console.log(postObj);
          // mock的话 就可以写这种then 形式了，不然感觉必须awit 出来一个变量
          axiosRequest
            .axiosPost(postObj)
            .then(function(response) {
              if (!isNull(response.data)) {
                console.log("response.data");
                console.log(response.data);
                storageOperation.setItem(
                  commonConfig.Token,
                  response.data.Token
                );
                storageOperation.setItem(
                  commonConfig.UserID,
                  response.data.UserID
                );
                storageOperation.setItem(
                  commonConfig.LoginID,
                  self.ruleForm2.usrname
                );
                // vue 路径参数 拼凑 库
                // self.$router.push(commonConfig.DashboardRouter);
                // self.$router.push("/Commic?volume=JOJO%20SBR-01");
                // self.$router.push("/Commic");
                  //$router的两个API
                  // params:{
                  //     id:xxx,
                  //         title:xxx
                  // }
                  self.$router.push({
                      // name:'/Commic',
                      name:'Commic',
                      // 这里前面的 / 不要写
                      query:{
                          volume:"JOJO SBR-01",
                      },
                      // params:{
                      //     id:xxx,
                      //     title:xxx
                      // }
                  })
              }
            })
            .catch(function(error) {});
        } else {
          alert("Failed!");
          return false;
        }
      });
    }
  },
  // 这里要写
  // name 不写也没事
  components: {
    HoverShow,
    Hover,
    Hover2,
    SearchFather
  }
};
</script>
